<template>
	<view class="content-baisc-layout">
		<u-navbar title-bold title="客服列表" :is-back="false" :border-bottom="false" :background="{
			background:'url(https://resource.lanbaozixun.com/uploads/images/20240617141440943244509.png) no-repeat',
			backgroundSize:'100% '
		}" title-color="#2F3033">
		</u-navbar>
		
		<view class="service-lists-area">
			
			<view v-for="(v,k) in serviceLists" :key="k" class="service-item u-border-radius-10 bg-white u-margin-top-20 u-margin-left-20 u-margin-right-20 u-padding-20 u-flex">
				<u-avatar :src="v.abs_avatar"></u-avatar>
				<view class="u-flex u-flex-1">
					<view class="u-flex-1 u-padding-left-10">
						<p class="bold md">{{v.nickname||''}}</p>
						<p class="u-padding-top-8 lighter xxs">{{v.time||''}}</p>
					</view>
					<view>
						<u-icon name="phone-fill" color="#9CA3AF" size="34" @click="makePhoneCall(v.phone)"></u-icon>
						<u-icon name="weixin-fill" color="#07C160" size="34" class="u-margin-left-10" @click="showWechatQrCode(v)"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="showWeChatStatus" mode="center" border-radius="14"  width="70%" closeable>
			<view class="bg-white u-border-radius-10 wechat-area u-padding-32">
				<view class="u-flex">
					<u-avatar :src="wechat.abs_avatar" mode="square"></u-avatar>
					<view class="u-flex u-flex-1">
						<view class="u-flex-1 u-padding-left-10">
							<p class="bold md">{{wechat.nickname||''}}</p>
							<p class="u-padding-top-8 lighter xxs">{{wechat.time||''}}</p>
						</view>
					</view>
				</view>
				<image :src="wechat.wechat_qr_code" mode="widthFix" class="wechat_qr_code u-margin-top-38"></image>
				
				<view class="xxs lighter u-text-center u-padding-top-15 u-padding-bottom-15">
					扫一扫上面的二维码图案，加我为朋友。
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		queryKefuLists
	} from '@/api/store'
	import {
		mapGetters,
	} from "vuex";
	export default {
		data() {
			return {
				wechat:{},
				serviceLists:[],
				showWeChatStatus:false
			};
		},
		onLoad() {
			this.queryKefuListsFun();
			uni.$once('h5ShareSetFinished',function(w,o){
				o.shareTitle = '客服中心';
				o.shareDesc = '客服中心';
				w.share(o)
			})
		},
		methods:{
			async queryKefuListsFun(){
				let {
					code,
					data
				} = await queryKefuLists();
				
				if(code == 1) this.serviceLists = data;
			},
			makePhoneCall(e){
				uni.makePhoneCall({
					phoneNumber: e.toString()
				});
			},
			showWechatQrCode(e){
				this.wechat = e;
				this.showWeChatStatus = true;
			},
			onShareAppMessage() {
				const shareInfo = Cache.get("shareInfo");
				return {
					title: '客服中心',
					path: "yixu/pages/service/index?invite_code=" + this.inviteCode,
					imageUrl: shareInfo.mnp_share_image,
				};
			},
			onShareTimeline() {
				const shareInfo = Cache.get("shareInfo");
				return {
					title: '客服中心',
					path: "yixu/pages/service/index?invite_code=" + this.inviteCode,
					imageUrl: shareInfo.mnp_share_image,
				};
			},
			computed: {
				...mapGetters(["inviteCode"]),
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #EDEFF2;
		min-height: 100vh;
		
		.content-baisc-layout{
			position: relative;
			min-height: 100vh;
			
			
			&::before{
				left: 0;
				right: 0;
				z-index: 1;
				height: 30%;
				content: ' ';
				position: absolute;
				background-image: url(https://resource.lanbaozixun.com/uploads/images/20240617141440943244509.png);
				background-size: 100%;
				background-repeat: no-repeat;
			}
			
			&::after{
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 0;
				content: ' ';
				position: absolute;
				background: linear-gradient(to bottom, rgba(176, 223, 255, 1) 35%,  rgba(237, 239, 242, 1) 40%) no-repeat;
			}
			
			.service-lists-area{
				z-index: 2;
				position: relative;
				
				
			}
		}
		
		.u-border-radius-10{
			border-radius: 10rpx;
		}
		
		.wechat-area{
			width: 100%;
			height: 100%;
		}
		
		.wechat_qr_code{
			width: 80%;
			margin: 0 10%;
		}
	}
</style>
